


<template>
  <div class="screen">
    <div class="title-cent">
      <!-- <el-image style="width: 80px; height: 80px;" :src="mLogoPic" fit="fit"></el-image>
      <br>-->
      <span style="font-size:40px;font-weight:bold;color:#303133">公务车辆管理系统</span>
    </div>
    <div class="screen-cent">
      <el-row>
        <span style="font-size:20px;font-weight:bold;color:#303133">用户登录</span>
      </el-row>
      <el-form
        style="margin-top:10px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item label prop="username" class="Font1">
          <el-input
            type="text"
            placeholder="输入用户名"
            v-model="ruleForm.username"
            autocomplete="off"
            icon="el-icon-user"
          >
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item label prop="pass" class="Font1">
          <el-input type="password" placeholder="输入密码" v-model="ruleForm.pass" autocomplete="off">
            <i slot="prefix" class="el-input__icon el-icon-unlock"></i>
          </el-input>
        </el-form-item>
        <el-form-item label prop="vertifiCode" class="Font1">
          <el-col :span="16">
            <el-input placeholder="输入验证码" v-model="ruleForm.vertifiCode" autocomplete="off">
              <i slot="prefix" class="el-input__icon el-icon-document-checked"></i>
            </el-input>
          </el-col>
          <el-col :span="8">
            <img :src="mVertifiCode" @click="refreshVertifiCode()" />
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button style="width:100%;" type="primary" @click="submitForm('ruleForm')">
            <span class="Font1" style="font-size:16px">登录</span>
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="ruleForm.saveInfo" style="float:left" class="Font1">记住账号</el-checkbox>
          <el-row style="float:right;">
            <el-link class="Font1" type="primary">忘记密码</el-link>
            <br />
            <span class="Font1" style="font-size:12px">版本号：V1.0.1</span>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div class="div-bottom">
      <el-row>
        <el-link class="dot-bottom" type="info">帮助</el-link>
        <el-link class="dot-bottom" type="info">隐私</el-link>
        <el-link class="dot-bottom" type="info">条款</el-link>
      </el-row>
      <el-row style="margin-top:10px">
        <el-link class="dot-bottom" type="info">Copyright © 2020 成都尺规信息技术有限公司</el-link>
      </el-row>
    </div>
  </div>
</template>


<style  scoped>
@import "../assets/css/base.css";
.screen {
  min-width: 100%;
  min-height: 100%;

  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 0;
  overflow: hidden;
  word-break: break-all;
  background: url("../assets/bg2.png");
  /* background-color: green; */
}
.screen-cent {
  min-width: 450px;
  padding: 20px;
  background-color: white;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
}
.title-cent {
  /* min-width: 450px; */
  padding: 20px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
}
.div-bottom {
  /* min-width: 450px; */
  padding: 20px;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
}
.dot-bottom {
  padding-left: 10px;
  padding-right: 10px;
}
</style>>

<script>
import {
  getRequestHeader,
  loginApi,
  setCookie,
  getCookie
} from "../api/user.js";
import { getNowFormatDate, getWeekToday } from "../api/util.js";
import { Loading } from "element-ui";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };

    var validateVertifiCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        pass: "",
        username: "",
        vertifiCode: "",
        saveInfo: true
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validateUsername, trigger: "blur" }],
        vertifiCode: [{ validator: validateVertifiCode, trigger: "blur" }]
      },
      mFullLoading: undefined,
      mVertifiCode: undefined,
      mLogoPic: require("../assets/logo.png")
    };
  },

  created() {
    this.ruleForm.username = getCookie("usernameInfo");
    this.refreshVertifiCode();
  },

  methods: {
    refreshVertifiCode() {
      this.mTag = new Date().getTime();
      this.mVertifiCode =
        getRequestHeader().host + "/user/getVerifiCode?tag=" + this.mTag;
    },
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          that.login();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },

    login() {
      var that = this;
      // 保存用户名
      if (this.ruleForm.saveInfo) {
        setCookie("usernameInfo", this.ruleForm.username);
      } else {
        setCookie("usernameInfo", "");
      }
      this.showFullLoading();
      loginApi(
        this.ruleForm.username,
        this.ruleForm.pass,
        this.ruleForm.vertifiCode,
        this.mTag,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.clsoeFullLoading();
            that.$message.success("登录成功");
            that.$parent.showMainPage();
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
        })()
      );
    }
  }
};
</script>